<script setup lang="ts">
import { ref, watch, onBeforeUnmount } from 'vue';
import category from '@/views/Product/Attr/components/category.vue';
import spuForm from './components/spuForm.vue';
import skuForm from './components/skuForm.vue';

//引入api
import { reqHasSpuAPI, reqSkuListAPI, reqDeleteSpuAPI } from '@/apis/product/spu'
import type { SpuData, HasSpuResponseData, Records, SkuInfoData, SkuData } from '@/apis/product/spu/type'
//引入分类仓库
import useCategoryStore from '@/store/modules/category'
import { ElMessage } from 'element-plus';

const categoryStore = useCategoryStore()
//子组件SpuForm的vc实例
const SpuForm = ref<any>()
//子组件skuForm的vc实例
const SkuForm = ref<any>()
//给category子组件传递数据，控制禁用按钮
const show = ref<number>(0);//0第一卡片 1spu卡片 2sku卡片;

//分页器
const pageNo = ref<number>(1);
const pageSize = ref<number>(3);

//储存请求的spu数据
const spuList = ref<Records>([])
//请求数据和分页器total
const total = ref<number>(0)
//监听仓库c3Id改变时，请求数据
watch(() => categoryStore.c3Id, () => {
    if (!categoryStore.c3Id) return
    getHasSpu()
});
//封装三级分类已有spu数据获取
const getHasSpu = async () => {
    let result: HasSpuResponseData = await reqHasSpuAPI(pageNo.value, pageSize.value, categoryStore.c3Id);
    if (result.code == 200) {
        spuList.value = result.data.records;
        total.value = result.data.total;
    }
}

//点击页面添加spu按钮点击回调函数
const addSpu = () => {
    show.value = 1;
    //使用子组件提供的方法,给子组件传递数据
    SpuForm.value.addNewSpu(categoryStore.c3Id)
};

//子组件spuForm传递过来的值
const changeShow = (val: number) => {
    //子组件传过来的值 0 第一卡片 1spu卡片 2sku卡片;
    show.value = val
    //重新获取请求
    getHasSpu()

}
//点击页面编辑spu按钮点击回调函数
const updateSpu = (row: SpuData) => {
    show.value = 1
    //使用子组件提供的方法,给子组件传递数据
    SpuForm.value.initHasSpuData(row)
}
//点击页面添加sku按钮点击回调函数
const addSku = (row: SpuData) => {
    show.value = 2
    //使用子组件提供的方法,给子组件传递数据
    SkuForm.value.initSkuData(categoryStore.c1Id, categoryStore.c2Id, row)
}
//存储sku数据
const skuArr = ref<SkuData[]>([])
const dialogShow = ref<boolean>(false)
//点击页面查看sku按钮点击回调函数
const findSku = async (row: SpuData) => {
    //使用子组件提供的方法,给子组件传递数据
    let result: SkuInfoData = await reqSkuListAPI(((row.id as number)))
    if (result.code == 200) {
        skuArr.value = result.data
        dialogShow.value = true
    }
}
//删除spu
const reMoveSpu = async (row: SpuData) => {
    let result = await reqDeleteSpuAPI(row.id as number)
    if (result.code == 200) {
        ElMessage.success('删除成功')
        getHasSpu()
    } else {
        ElMessage.error('删除失败')
    }
}
//路由组件销毁的时候，仓库相关数据清空
onBeforeUnmount(() => {
    categoryStore.$patch({ c1Id: '', c2Id: '', c3Id: '' })
})
</script>

<template>
    <!-- 三级分类 -->
    <category></category>
    <el-card class="spu-card">
        <div v-show="show == 0">
            <el-button type="primary" icon="Plus" :disabled="!categoryStore.c3Id" @click="addSpu">添加SPU</el-button>
            <!-- 表格 -->
            <el-table border class="spu-table" :data="spuList">
                <el-table-column label="序号" type="index" width="80" align="center"></el-table-column>
                <el-table-column label="SPU名称" prop="spuName"></el-table-column>
                <el-table-column label="SPU描述" prop="description" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作">
                    <template #="{ row }">
                        <el-button type="primary" @click="addSku(row)">添加</el-button>
                        <el-button type="danger" @click="reMoveSpu(row)">删除</el-button>
                        <el-button type="warning" @click="updateSpu(row)">编辑</el-button>
                        <el-button type="info" @click="findSku(row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination class="spu-pagination" :pager-count="5" background v-model:current-page="pageNo"
                v-model:page-size="pageSize" :page-sizes="[3, 5, 7, 10]"
                layout="prev, pager, next, jumper, ->,sizes, total" :total="total" @current-change="getHasSpu"
                @size-change="getHasSpu">
            </el-pagination>
        </div>
        <!-- 添加或修改spu表单 -->
        <spuForm ref="SpuForm" v-show="show == 1" @changeShow="changeShow"></spuForm>
        <!-- 添加sku表单 -->
        <skuForm ref="SkuForm" v-show="show == 2" @changeShow="changeShow"></skuForm>
        <!-- dialog 弹窗 -->
        <el-dialog v-model="dialogShow" title="查看SKU" width="50%">
            <el-table border class="spu-table" :data="skuArr">
                <el-table-column label="SKU名称" prop="skuName"></el-table-column>
                <el-table-column label="价格" prop="price"></el-table-column>
                <el-table-column label="重量" prop="weight"></el-table-column>
                <el-table-column label="图片">
                    <template #="{ row }">
                        <img :src="row.skuDefaultImg" alt="" width="100px" height="100px">
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </el-card>

</template>

<style lang="scss" scoped>
.spu-card {
    margin-top: 20px;
}


.spu-table {
    margin: 20px 0;
}
</style>